<template>
  <el-container>
    <el-header style="padding:0px">
      <el-row class="toolbar" style="padding: 12px 6px 0px 0px;">
        <!--工具条-->
        <el-form :inline="true" :model="filters">
          <el-col :span="10">
            <el-col :span="3">
              <label class="el-form-item__label" style="line-height: 20px;padding-top: 0px">角色编号</label>
            </el-col>
            <el-col :span="20">
              <el-input v-model="filters.roleId"></el-input>
            </el-col>
          </el-col>
          <el-col :span="10">
            <el-col :span="3">
              <label class="el-form-item__label" style="line-height: 20px;padding-top: 0px">角色名称</label>
            </el-col>
            <el-col :span="20">
              <el-input v-model="filters.roleName"></el-input>
            </el-col>
          </el-col>
          <el-col :span="4" align="right">
            <el-form-item>
              <el-button type="primary" v-on:click="getRoles()">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-header>
    <el-main style="padding: 0px;border: 1px solid #ebebeb;border-radius: 3px;transition: .2s;">
      <!--列表-->
      <el-table :data="roles" ref="moviesTable" highlight-current-row v-loading="listLoading" @row-click="clickRow"
                @row-dblclick="rowDbLook"     @selection-change="selsChange" id="roleTable" style="width: 100%;overflow-y: scroll">
        <el-table-column type="selection" width="55" align="left">
        </el-table-column>
        <el-table-column prop="roleId" label="角色编号" sortable align="left">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名称" align="left">
        </el-table-column>
        <el-table-column prop="remark" label="描述" align="left">
        </el-table-column>
        <el-table-column prop="roleSign" label="创建人" align="left">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable align="left">
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="padding: 0px;">
      <!--工具条-->
      <el-row>
        <el-col :span="24" class="toolbarrole" style="padding-top:12px;padding-bottom: 0px">
          <el-pagination layout="prev, pager, next,total" @current-change="handleCurrentChange" :page-size="this.limit"
                         :total="total" style="float:left;margin-bottom: 0px;padding-left: 0px">
          </el-pagination>
          <div style="float:right;margin-right: 5px;">
            <el-button type="primary" @click="roleLook()">查看</el-button>
            <el-button type="primary" @click="roleAdd()">增加</el-button>
            <el-button type="primary" @click="roleUpdate()">编辑</el-button>
            <el-button type="primary" @click="batchRemove()">删除</el-button>
          </div>
        </el-col>
      </el-row>
    </el-footer>

    <!--查看界面-->
    <el-dialog title="查看" :visible.sync="lookFormVisible" :close-on-click-modal="false" width="30%" center>
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editForm.roleName" auto-complete="off" disabled="true" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="remark">
          <el-input type="textarea" v-model="editForm.remark" disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button @click.native="lookFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" width="30%" center>
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editForm.roleName" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="remark">
          <el-input type="textarea" v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>
        <el-button @click.native="editFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" width="30%" center>
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addForm.roleName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="remark">
          <el-input type="textarea" v-model="addForm.remark"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
        <el-button @click.native="addFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  import {postObj, get,deleteObj,updateObj} from '../api/api';
  export default {
    data() {
      return {
        filters: {
          roleId: '',
          roleName: ''
        },
        roles: [],
        total: 0,
        page: 1,
        limit: 3,
        listLoading: false,
        sels: [],//列表选中列
        editFormVisible: false,//编辑界面是否显示
        lookFormVisible:false,//查看界面是否显示
        editLoading: false,
        editFormRules: {
          roleName: [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ]
        },
        //编辑界面数据
        editForm: {
          roleId: '',
          roleName: '',
          remark: '',
          treeSelect: '',
          menuIds: '',
          userIdCreate:''
        },
        addFormVisible: false,//新增界面是否显示
        addLoading: false,
        addFormRules: {
          roleName: [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ]
        },
        beforeData:"",
        treeData: "",
        //新增界面数据
        addForm: {
          roleName: '',
          remark: '',
          menuIds: '',
          roleSign:'',
          userIdCreate:''
        }
      }
    },
    methods: {
      rowDbLook(row,event){
        var ids = row.roleId;
        this.editLoading = true;
        var params = new URLSearchParams();
        params.append('id',ids)
        params.append("method","add")
        params.append("isLook",true);
        this.editForm.roleId = ids;
        this.editForm.roleName= row.roleName;
        this.editForm.remark = row.remark;
        get("/sys/role/edit/",params).then(res => {
          this.editLoading = false;
          this.lookFormVisible = true;
        }).catch(()=> {
          this.lookFormVisible = true;
        })
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getRoles();
      },
      clickRow(row) {
        this.$refs.moviesTable.toggleRowSelection(row)
      },
      /**
       * 重置按钮
       */
      reset: function () {
        this.filters.roleId = "";
        this.filters.roleName = "";
      },
      //获取角色列表
      getRoles: function () {
        this.listLoading = true;
        var params = new URLSearchParams();
        params.append('page', this.page);
        params.append('limit', this.limit);
        params.append("roleId", this.filters.roleId);
        params.append("roleName", this.filters.roleName);
        get("/sys/role/list", params).then(res => {
          this.total = res.data.totals;
          this.roles = res.data.list;
          this.listLoading = false;
        })
      },
      //显示查看界面
      roleLook: function () {
        var ids = this.sels.map(item => item.roleId).toString();
        if (ids == "" || ids == null || ids.split(',').length > 1) {
          this.$message({message: '请选择一条记录', type: 'warning'});
          return;
        }
        this.editLoading = true;
        var params = new URLSearchParams();
        params.append('id',ids);
        params.append("isLook",true);
        this.editForm.roleId = ids;
        this.editForm.roleName= this.sels.map(item => item.roleName).toString();
        this.editForm.remark = this.sels.map(item => item.remark).toString();
        this.editLoading = false;
        this.lookFormVisible = true;
      /*  get("/sys/role/edit/",params).then(res => {
          this.editLoading = false;
          this.lookFormVisible = true;
      }).catch(()=> {
           this.lookFormVisible = true;
      })*/
      },
      //显示编辑界面
      roleUpdate: function () {
        var ids = this.sels.map(item => item.roleId).toString();
        if (ids == "" || ids == null || ids.split(',').length > 1) {
          this.$message({message: '请选择一条记录', type: 'warning'});
          return;
        }
        this.editLoading = true;
        var params = new URLSearchParams();
        params.append('id',ids);
        params.append("isLook",false);
        this.editForm.roleId = ids;
        this.editForm.roleName= this.sels.map(item => item.roleName).toString();
        this.editForm.remark = this.sels.map(item => item.remark).toString();
        this.editLoading = false;
        this.editFormVisible = true;
        /*get("/sys/role/edit/",params).then(res => {
          this.editLoading = false;
          this.editFormVisible = true;
        }).catch(()=> {
          this.editFormVisible = true;
        })*/
      },
      //显示新增界面
      roleAdd: function () {
        var params = new URLSearchParams();
        params.append("isLook",false);
       get("/sys/role/getPermissions",params).then(res => {
          this.treeData = res.data.list;
          this.listLoading = false;
          this.addFormVisible = true;
        }).catch(()=>{
          this.addFormVisible = true;
        })
        this.addFormVisible = true;
        this.addForm = {
          roleName: '',
          remark: ''
        };
      },
      //编辑
      editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.editLoading = true;
            let para = Object.assign({}, this.editForm);
            updateObj("/sys/role/update", para).then((res) => {
              this.editLoading = false;
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.$refs['editForm'].resetFields();
              this.editFormVisible = false;
              this.getRoles();
            });
          }
        });
      },
      //新增
      addSubmit: function () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.addLoading = true;
            let para = Object.assign({}, this.addForm);
            postObj("/sys/role/save", para).then(() => {
              this.addLoading = false;
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.$refs['addForm'].resetFields();
              this.addFormVisible = false;
              this.getRoles();
            });
          }
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      //批量删除
      batchRemove: function () {
        var ids = this.sels.map(item => item.roleId).toString();
        if (ids == "" || ids == null) {
          this.$message({message: '请选择一条记录', type: 'warning'});
          return;
        }
        this.$confirm('确认删除选中记录吗？', '提示', {}).then(() => {
          this.listLoading = true;
          var pids = [];
          var arr = ids.split(',');
          for (var i = 0; i < arr.length; i++) {
            pids[i] = parseInt(arr[i]);
          }
          deleteObj('/sys/role/batRemove', {
            roleIds: pids
          }).then(() => {
            this.listLoading = false;
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getRoles();
          });
        })
      }
    },
    mounted() {
      var iframe = document.getElementById("roleTable");
      iframe.style.height = window.innerHeight - 152 + 'px';
      window.onresize = function () {
        var iframe = document.getElementById("roleTable");
        iframe.style.height = window.innerHeight - 152 + 'px';
      }
      this.getRoles();
    }
  }
</script>

<style scoped>
  .toolbar {
    background: transparent;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
  }

  .toolbarrole{
    background: transparent;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
  }
  .el-table::before {
    z-index: inherit;
  }
</style>
